Golden Bullets

Wanted - golden bullets western poster Reading Time: 4 minutes

Bulleted lists break up dense blocks of content. They make scanning for discrete content and reading easier for visual readers. A Bronze content user experience (UX) elevates to Golden.

Meanwhile, people using a screen reader hear more meta-information. Depending on mode and setting, each list and bullet announces. The UX remains Bronze or lower.

With minimal effort we can update the screen reader Bronze UX to a Golden one. We can design an inclusive UX of lists and make their bullets golden.

Caveat

The aim is to limit the “noise” used to describe an HTML list architecture. It’s not a silver bullet. Removing a list’s semantic layout information can give a negative UX. As for anything in design, it depends.

Strategy

We’re going to:

  1. Hide the bulleted list from screen readers using ARIA
  2. Identify the list’s preceding paragraph
  3. Break the list content out into an array
  4. Add the punctuated array to the paragraph

Requirements:

  1. HTML for content
  2. JavaScript for function
  3. CSS and ARIA for presentation

Walk-Thru

Here’s the basic HTML, JavaScript and CSS architecture for our list update. It’s an ingredients list to make flat bread. In this post, we only update lists with the class listed.

Designed Output

Updated list presentation

Audible Output

“You will need: Milk, Plain flour, Cumin seeds and Salt.”

Visual Output

You will need:

  • Milk
  • Plain flour
  • Cumin seeds
  • Salt

HTML

<p>You will need:</p>
<ul class="listed">
	<li>Milk</li>
	<li>Plain flour</li>
	<li>Cumin seeds</li>
	<li>Salt</li>
</ul>

Function

In this case the JavaScript is in my favourite flavour of JQuery:

$(".listed").each(function(){
        var 
            //previous para
            intro = $(this).prev("p"),
            //needing commas
            commas = $(this).children().not(":last"),
            //needing period
            periods = $(this).children().last().text(),
            //An array for commas
            arr = [];

    //1. Add ARIA hidden attribute to UL
        $(this).attr("aria-hidden","true");

    //2. Break commas into an array with commas
        arr = $(commas).map(function(j, element) {
            return $(element).text();
        }).get();

        var commastring = arr.join(", ")

    //3. Build the span to append
        $(intro).append("<span class='invisible'> "+commastring+" and "+periods+".</span>");
})//Listed function END

CSS

We want to style the screen reader-only text invisible to visual readers. Don’t “hide” it.

/*Displace element off the page*/
<style>
.invisible {
  position:absolute;
  left:-99999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
</style>

Testing

You can use a screen reader to test the outcome on the following Ordered ol and Unordered ul list.

You will need:

  • Milk
  • Plain flour
  • Cumin seeds
  • Salt

You will need:

  1. Milk
  2. Plain flour
  3. Cumin seeds
  4. Salt

Inspection of Output

When a screen reader is not available, use your browser’s code inspector to review the HTML output. It should be as follows:

<p>You will need:<span class="invisible"> Milk, Plain flour, Cumin seeds and Salt.</span></p>
<ul class="listed" aria-hidden="true">
    <li>Milk</li>
    <li>Plain flour</li>
    <li>Cumin seeds</li>
    <li>Salt</li>
</ul>

<p>You will need the following:<span class="invisible"> Milk, Plain flour, Cumin seeds and Salt.</span></p>
<ol class="listed" aria-hidden="true">
    <li>Milk</li>
    <li>Plain flour</li>
    <li>Cumin seeds</li>
    <li>Salt</li>
</ol>

Punctuation

This technique has added commas and a period to the list array. The idea is to ensure screen readers intone natural breaks between items. We can update the strategy when existing punctuation causes an audible anomaly. In testing with Mac VoiceOver, it didn’t

Style Guides

Common list writing style guides can specify all manner of punctuation rules. In testing on a mobile device I found many of the rules are ableist. When we exclude punctuation, announcements can fail to intone a break between items.

Our style guides need thorough testing to prevent their being ableist.

In testing with Mac VoiceOver, list items that end with a period don’t degrade the UX. When existing punctuation does degrade the UX, you can remove it.

Removing Punctuation

We have 4 options when handling existing list punctuation:

  1. Remove it, or
  2. Don’t remove it, or
  3. Don’t add punctuation, or
  4. Don’t update the list experience.

From a developer viewpoint, the strategies are no great effort. We only need to specify which lists to update and how. That’s a design responsibility, ie. the writer’s.

We need to specify how our developer should handle each list. CSS classes are our HTML micro-data of choice. We don’t need clever data-types or over-engineered solutions based on the velocity of Earth through the cosmos. We need 2 versions of list; those with:

  1. No action (no class applied)
  2. Standard conversion

Complex conversions involving updating existing punctuation remain an option. This and other cases depends only on your testing and design.

Test

Test it:

  • With real people who really use their screen readers.
  • Across browsers, devices, and assistive technologies.
  • Using your own workstation’s screen reader (yes, you have one. Use it).
Test result

Mac’s VoiceOver’s text output of the preceding Test list is as follows:

Test it: With real people who really use their screen readers., Across browsers, devices, and assistive technologies., and Using your own workstation’s screen reader (yes, you have one. Use it).

One or two writers just did cartwheels off their grammar-grounded chairs. Relax. It’s how the string is announced that counts, which roughly translates visually to:

“Test it: with real people who really use their screen readers; across browsers, devices, and assistive technologies; and using your own workstation’s screen reader. Yes, you have one. Use it.”

Cool it is said a Yoda never.

Summary

We can design the best reading experience for visual and audible consumption. Sometimes we only need to do nothing. In cases that matter, we can offer an inclusive Golden reading experience to everyone.

Key takeaways

  • We are designing a visual and audible experience.
  • Our writer designs when and when not to update the list experience.
  • Writers work with our developer experts to implement the right model.
  • The strategy is entirely within the scope of your design system and personal web spaces.

Top

 

Leave a Reply

Your email address will not be published. Required fields are marked *